<template>
	<div ref="babyblue" class="babyblue" @scroll="scroll">
		<div ref="content">
			<BHeader></BHeader>
			<div class="settleBox" style="margin-bottom: 80px;">
				<div class="settlecontainer">
					<div :class="['settleItem', {'padding-bottom': fIsFixed}]">
						<div :class="['settleCont', {'padding-top': hIsFixed}]">
							<div :class="['tip-con', {'fixed': hIsFixed}]">
								<Alert type="error" show-icon class="settleTips settleFail" closable @on-close="hIsFixed = false">
									<template slot="desc">
										<h4 class="title">您提交的入驻信息审核不通过，原因如下：</h4>
										
										<div v-if="!settleForm.remarks">
											无
										</div>
										<div v-else>
											<ol>
												<li v-text="settleForm.remarks"></li>
											</ol>
											<p>请修改后再次提交。</p>
										</div>
									</template>
								</Alert>
							</div>
							<bussinessLicense :settleForm="settleForm" :isShow="true" ref="bussiness" :OldSocialCode="settleForm.socialCode" @ItemProgress="ItemProgress" :imgList="businessPhotoArr"></bussinessLicense>
							<roadLicense :settleForm="settleForm" :isShow="true" ref="road" :imgList="roadPhotoArr" @ItemProgress="ItemProgress" :OldLicenseNo="settleForm.licenseNo"></roadLicense>
							<legalPersonInfo :settleForm="settleForm" :isShow="true" ref="legalPerson" :imgListF="idFrontPhotoArr" @ItemProgress="ItemProgress" :imgListB="idBackPhotoArr"></legalPersonInfo>
						</div>
						
						<div :class="['footer', {'fixed': fIsFixed}]">
							<div class="btn-con">
								<Button type="primary" class="nextStepBtn" @click="submitForm">提交入驻信息</Button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<b-footer ref="footer"></b-footer>
		</div>
	</div>
</template>
<script type="text/javascript">
import BHeader from 'components/BHeader'; //页脚
import BFooter from 'components/BFooter'; //页脚
import bussinessLicense from './component/bussinessLicense';
import roadLicense from './component/roadLicense';
import legalPersonInfo from './component/legalPersonInfo';
import { IMG_SEE } from '@/service/api';
	 export default {
	 	components: { bussinessLicense, roadLicense, legalPersonInfo, BHeader, BFooter },
	 	data() {
	 		return {
	 			i: 0,
	 			businessPhotoArr: [],
	 			roadPhotoArr: [],
	 			idFrontPhotoArr: [],
	 			idBackPhotoArr: [],
	 			curItem: 1,  //当前所在模块
	 			isValid: true,  //是否执行认证
	 			fleetId: '',  //营运企业的id
	 			oldImgArr: [],  //获取原始数据图片id
	 			curImgArr: [],  //当前修改后的图片id
				settleForm: {
	 				name: "",	//公司名称
					socialCode: "",	//统一社会信用代码
					businessType: "",	//维修企业经济类型
					addressProvinceCode: "",	//营业执照省份
					addressCityCode: "",	//营业执照城市
					// addressCountyCode: "",//营业执照区县
					address: "",	//营业执照详细地址
					scope: "",	//经营范围
					businessPhoto: "",	//营业执照副本电子版
					licenseNo: "",	//道路运输经营许可证号
					licensePublish: new Date(),	//道路经营许可证发证日期
					licenseBegin: new Date(),	//道路经营许可证开始日期
					licenseEnd: new Date(),	//道路经营许可证结束日期
					provinceCode: '', //所属管辖区域
					cityCode: '', //所属管辖区域
					category: "",	//企业经营业务类别
					businessDetailType: [],  
					roadPhoto: "",	//道路运输经营许可证信本电子版
					legalPerson: "",	//法人负责人姓名
					IDNumber: "",	//身份证件号
					legalMobile: "",	//法人手机号码
					idfront: "",	//法人身份证件电子版（正面）
					idback: "",	//法人身份证件电子版（反面）
					// accountId: '',	//企业id
					is_status: '2',	//企业资料完整默认为2，后台系统默认未完整为1
					contactName: '',	//企业联系人姓名
					mobile: '',		//企业联系人联系方式
					password: '',
					remarks: '',  //审核失败的原因
					status: 1
				},
				hIsFixed: false,	//顶部提示是否固定定位
				fIsFixed: true,		//底部是否固定定位
				timer: null,		//定时器 防抖动
				timerIsOk: true		//防抖动
	 		}
	 	},
	 	mounted() {
	 		this.init();
	 	},
	 	methods: {
	 		init() {
	 			if(this.$route.query.id){
	 				this.companyId = this.$route.query.id; //获取营运企业的id
	 				//获取入驻详情
	 				this.$ajax(this.$api.settle.settleDetail, {id: this.companyId}, (data)=>{
	 					console.log(data)
	 					
	 					this.settleForm = data.content;
	 					this.settleForm.addressProvinceCode = String(this.settleForm.addressProvinceCode);
	 					this.settleForm.addressCityCode = String(this.settleForm.addressCityCode);
	 					this.settleForm.provinceCode = String(this.settleForm.provinceCode);
	 					this.settleForm.cityCode = String(this.settleForm.cityCode);
	 					this.settleForm.countyCode = String(this.settleForm.countyCode);
	 					this.settleForm.businessType = String(this.settleForm.businessType);
	 					this.oldImgArr.push(this.settleForm.businessPhoto, this.settleForm.roadPhoto, this.settleForm.idfront, this.settleForm.idback)
	 					console.log('this.settleForm ')
	 					console.log(this.settleForm.businessDetailType)
	 					this.getImgList('businessPhotoArr','bussiness', this.settleForm.businessPhoto);
	 					this.getImgList('roadPhotoArr','road', this.settleForm.roadPhoto);
	 					this.getImgList('idFrontPhotoArr','legalPerson', this.settleForm.idfront);
	 					this.getImgList('idBackPhotoArr','legalPerson', this.settleForm.idback, 'imgUpload1');
						this.settleForm.category = String(this.settleForm.category);
	 					this.$refs.road.$refs.bussinessScope.getBussinessScope(this.settleForm.category, this.settleForm.businessDetailType);
	 				}, (error)=>{
	 					console.log(error)
	 				})
	 			}
	 		},
	 		getImgList(item, role, val, imgRef) {   //获取图片并显示
	 			let obj = {
	 				url: val
	 			};
	 			
	 			this[item].push(obj);
	 			if(!imgRef) imgRef = 'imgUpload';
	 			this.$refs[role].$refs[imgRef].init();
	 		},
	 		ItemProgress(item) {  //提交
	 			if(item == 'ok'){
	 				this.index++;
	 			}
	 			if(this.index == 3){
	 				this.curImgArr = [];
	 				this.curImgArr.push(this.settleForm.businessPhoto, this.settleForm.roadPhoto, this.settleForm.idfront, this.settleForm.idback)
	 				this.oldImgArr = [];
	 				this.oldImgArr.forEach((item)=>{
	 					if(!this.curImgArr.includes(item)) {
	 						this.delImgFun(item);
	 					}
	 				})
	 				//等于3说明执行了三次ok，允许执行修改操作
	 				this.settleForm.id = this.$route.query.id;

	 				console.log('this.settleForm')
	 				console.log(this.settleForm)
	 				console.log(this.settleForm.businessDetailType)
	 				// return
	 				this.settleForm.status = 1;
	 				this.$ajax(this.$api.settle.settleUpdate,this.settleForm, (data)=>{
	 					console.log(data)
	 					let code = data.code;
	 					if(data.code == 200){
	 						this.$Message.success('修改成功！请等待审核...');
	 						this.$router.replace('/settleProgress')
	 					}
	 					else if(data.code == 467){
	 						this.$Message.error('绑定手机号不能修改');
	 					}else if(data.code == 466){
	 						this.$Message.error('id为空');
	 					}else if(data == 403){
	 						this.$Message.error('该账户没有权限修改');
	 					}
	 				}, (error)=>{
	 					console.log(error)
	 				})
	 			}
	 		},
 		   	delImgFun(idOld) {  //删除掉被修改的图片
	        	this.$ajax('delImgUrl',{id: idOld}, (data)=> {
	          		console.log(data)
	        	}, (data)=> {
	          		console.log(data)
	        	})
	      	},
	 		submitForm() {  //提交
	 			this.index = 0;
	 			this.$refs.bussiness.validateFun('business');
	 			this.$refs.road.validateFun('road');
	 			this.$refs.legalPerson.validateFun();

	 			console.log('settleForm');
	 			console.log(this.settleForm);
	 		},
			scroll(){  //滚动事件监听
				if(!this.timerIsOk) return;
				this.timerIsOk = false;
				this.timer = setTimeout(() => {
					let babyblue = this.$refs.babyblue;
					let content = this.$refs.content;
					
					/* 顶栏判断 */
					// let hScrollTop = content.offsetHeight - babyblue.offsetHeight - 150;
					if(babyblue.scrollTop > 145 && !this.hIsFixed){
						this.hIsFixed = true;
					}
					if(babyblue.scrollTop < 145 && this.hIsFixed){
						this.hIsFixed = false;
					}

					/* 低栏判断 */
					let fScrollTop = content.offsetHeight - babyblue.offsetHeight - 100;
					if(babyblue.scrollTop > fScrollTop && this.fIsFixed){
						this.fIsFixed = false;
					}
					if(babyblue.scrollTop < fScrollTop && !this.fIsFixed){
						this.fIsFixed = true;
					}

					this.timerIsOk = true;
				}, 1000/60);
			}
	 	}
	 }
</script>
<style lang="less" rel="stylesheet/less">
.babyblue{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: auto;
	background: @color-Background;
}
.settleBox {
	padding: 40px 0 0 0;
	.settlecontainer {
		width: @min-width;
		margin: 0 auto;
		.settleItem {
			background: #fff;
			&.padding-bottom{
				padding-bottom: 100px;
			}
		}
	}
	
	//切换模块-
	.settleCont {
		@tip-height: 115px;
		@padding-top: 40px;
		background: #fff;
		width: 100%;
		margin: 0 auto;
		padding: @padding-top 100px;
		text-align: center;
		&.padding-top{
			padding-top: @tip-height + @padding-top;
		}
		.mt40 {
			margin-top: 40px;
		}
		.tip-con{
			&.fixed{
				position: fixed;
				top: 0;
				padding-top: 10px;
				background: #fff;
				z-index: 10;
			}
		}
		.settleTips {
			width: 1000px;
			height: @tip-height;
			border: 1px solid #fbd9d0;
			border-radius: 4px;
			background-color: #fdece8;
			margin: auto;
			color: @color-Sub;
			.ivu-alert-icon {
                font-size: 36px;
                margin-top: -27px;
            }
            .ivu-alert-desc {
        	    margin-right: 20px;
			    margin-left: 10px;
            }
            .ivu-alert-with-icon {
                padding-right: 78px;
            }
            .ivu-alert-close .ivu-icon-ios-close-empty {
            	font-size: 30px;
            }
			ol {
				list-style: decimal;
				li {
					list-style-position: inside;
				}
			}
            .title {
                font-family: "PingFangSC-Medium";
                color: @color-Error;
                font-size: 14px;
            }
		}
		.ivu-form-item-label {
            font-size: 14px;
            color: @color-Content;
        }
        .ivu-input {
        	width: 100%;
            height: 40px;
           // line-height: 42px;
            background: #FFFFFF;
            border: 0.5px solid @color-Border;
            border-radius: 2px;
        }
        .ivu-form-label-left .ivu-form-item-label {
        	text-align: right;
        	padding-right: 24px;
        } 
        .ivu-form-item-required .ivu-form-item-label:before {
        	content: ''
        }
        .settleInfoBox {
        	display: inline-block;
            margin: 30px auto 0;
        }
        .ivu-select-single .ivu-select-selection {
        	height: 40px;
        	line-height: 40px;
            border: 0.5px solid @color-Border;
            border-radius: 2px;
            .ivu-select-placeholder,.ivu-select-selected-value {
            	height: 40px;
            	line-height: 40px;
            }
        }
        .settleContItem {
        	width: 100%;
        	.title {
        		position: relative;
	        	padding-left: 5px;
	        	padding-top: 0;
	        	margin-bottom: 23px;
	        	text-align: center;
	        	font-size: 14px;
	        	color: @color-Title;
	        	line-height: 25px;
	        	&:after,
	        	&:before {
	        		position: absolute;
	        		top: 12px;
	        		content: '';
	        		width: 40%;
	        		height: 1px;
	        		background: @color-Divider;
	        	}
	        	&:after {
	        		right: 0;
	        	}
	        	&:before {
	        		left: 0;
	        	}
	        }
	        .imgBoxForm {
	        	width: 100%;
	        	.ivu-form-item-error-tip {
		        	top: 104px;
	        	}
	        }
        }
        .InputNone {
        	position: absolute;
        	bottom: 0;
        	width: auto;
        	height: 0;
        	opacity: 0;
        }
	}
	.ml114 {
		margin-left: 114px;
	}
	.ml150 {
		margin-left: 150px;
	}
	.footer{
		&.fixed{
			position: fixed;
	 		width: 100%;
			bottom: 0;
			z-index: 10;
			right: 9px;
		}
		.btn-con{
			height: 100px;
			line-height: 100px;
			background: #fff;
			text-align: center;
			width: @min-width;
			margin: auto;
			box-shadow: 0px -1px 4px 0px rgba(221, 222, 225, 1);
			.nextStepBtn {
				width: 998px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}	
</style>